import { withRouter } from "react-router-dom";
import React, { Component } from "react";
import styles from "./collection.module.scss";
class index extends Component {
  render() {
    return (
      <div>
        <div className={styles.addAddress}>
          <div className={styles.topNavLeft}>
            <svg
              className={styles.icon}
              aria-hidden="true"
              onClick={() => {
                this.props.history.push("/user");
              }}
            >
              <use href="#icon-zuojiantou"></use>
            </svg>
          </div>
          <div className={styles.topNavCenter} style={{ paddingRight: "44%" }}>
            收藏
          </div>
        </div>
        <div className={styles.select}>
          <div className={styles.secBox}>
            <span className={styles.shop}>店铺</span>
            <span>品牌</span>
          </div>
        </div>
        <div className={styles.colContent}>
          <div className={styles.main}>
            <div className={styles.mainLeft}>
              <img
                src="https://cube.elemecdn.com/b/38/f147ce089064226302758b72a6df6jpeg.jpeg?x-oss-process=image/format,webp/resize,w_218,h_218,m_fixed"
                alt=""
              ></img>
            </div>
            <div className={styles.mainRight}>
              <div className={styles.top}>
                <h3>{"蜜汁烤肉(后瑞店)"}</h3>
              </div>
              <div className={styles.center}>
                <span>月售1003单</span>
              </div>
              <div className={styles.bottom}>
                <div className={styles.boLeft}>
                  <span>起送￥15</span>
                  <span>远距离配送￥21.5</span>
                  <em>￥24.7</em>
                </div>
                <div className={styles.boRight}>
                  <span>48分钟</span>
                  <span>13.7km</span>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.main}>
            <div className={styles.mainLeft}>
              <img
                src="https://cube.elemecdn.com/b/38/f147ce089064226302758b72a6df6jpeg.jpeg?x-oss-process=image/format,webp/resize,w_218,h_218,m_fixed"
                alt=""
              ></img>
            </div>
            <div className={styles.mainRight}>
              <div className={styles.top}>
                <h3>{"蜜汁烤肉(后瑞店)"}</h3>
              </div>
              <div className={styles.center}>
                <span>月售1003单</span>
              </div>
              <div className={styles.bottom}>
                <div className={styles.boLeft}>
                  <span>起送￥15</span>
                  <span>远距离配送￥21.5</span>
                  <em>￥24.7</em>
                </div>
                <div className={styles.boRight}>
                  <span>48分钟</span>
                  <span>13.7km</span>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.main}>
            <div className={styles.mainLeft}>
              <img
                src="https://cube.elemecdn.com/b/38/f147ce089064226302758b72a6df6jpeg.jpeg?x-oss-process=image/format,webp/resize,w_218,h_218,m_fixed"
                alt=""
              ></img>
            </div>
            <div className={styles.mainRight}>
              <div className={styles.top}>
                <h3>{"蜜汁烤肉(后瑞店)"}</h3>
              </div>
              <div className={styles.center}>
                <span>月售1003单</span>
              </div>
              <div className={styles.bottom}>
                <div className={styles.boLeft}>
                  <span>起送￥15</span>
                  <span>远距离配送￥21.5</span>
                  <em>￥24.7</em>
                </div>
                <div className={styles.boRight}>
                  <span>48分钟</span>
                  <span>13.7km</span>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.main}>
            <div className={styles.mainLeft}>
              <img
                src="https://cube.elemecdn.com/b/38/f147ce089064226302758b72a6df6jpeg.jpeg?x-oss-process=image/format,webp/resize,w_218,h_218,m_fixed"
                alt=""
              ></img>
            </div>
            <div className={styles.mainRight}>
              <div className={styles.top}>
                <h3>{"蜜汁烤肉(后瑞店)"}</h3>
              </div>
              <div className={styles.center}>
                <span>月售1003单</span>
              </div>
              <div className={styles.bottom}>
                <div className={styles.boLeft}>
                  <span>起送￥15</span>
                  <span>远距离配送￥21.5</span>
                  <em>￥24.7</em>
                </div>
                <div className={styles.boRight}>
                  <span>48分钟</span>
                  <span>13.7km</span>
                </div>
              </div>
            </div>
          </div>
          <div className={styles.main}>
            <div className={styles.mainLeft}>
              <img
                src="https://cube.elemecdn.com/b/38/f147ce089064226302758b72a6df6jpeg.jpeg?x-oss-process=image/format,webp/resize,w_218,h_218,m_fixed"
                alt=""
              ></img>
            </div>
            <div className={styles.mainRight}>
              <div className={styles.top}>
                <h3>{"蜜汁烤肉(后瑞店)"}</h3>
              </div>
              <div className={styles.center}>
                <span>月售1003单</span>
              </div>
              <div className={styles.bottom}>
                <div className={styles.boLeft}>
                  <span>起送￥15</span>
                  <span>远距离配送￥21.5</span>
                  <em>￥24.7</em>
                </div>
                <div className={styles.boRight}>
                  <span>48分钟</span>
                  <span>13.7km</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default withRouter(index);
